<template>
  <div card p-36rpx>
    <div flex flex-a-c flex-j-sb>
      <div>
        <!-- 积分商品 -->
        <div
          v-if="props.res.data && props.res.data.points !== undefined && props.res.data.scopeType === 'PORTION_GOODS'">
          <div flex items-end>
            <div text-46rpx font-700 text-main-color>{{ props.res.data.points }}</div>
            <div ml-8rpx text-main-color>积分</div>
          </div>
        </div>
        <!-- 普通商品 -->
        <div v-else text-46rpx font-700 text-main-color>{{ unitPrice(props.res.data.price, '￥')
          }}</div>
      </div>
      <div flex text-24rpx gap-24rpx>
        <div flex flex-col flex-a-c>
          <nut-icon name="share-n" @click="share"></nut-icon>
          <span>分享</span>
        </div>
        <div w-80rpx flex flex-col flex-a-c @click="favorite">

          <nut-icon size="18"  v-if="isFavorite" name="heart-fill"></nut-icon>
          <nut-icon size="18" v-if="!isFavorite" :color="'#999'" name="heart1"></nut-icon>
          <span :class="isFavorite ? '' : ''">{{ isFavorite ? '已' : '' }}收藏</span>
        </div>
      </div>
    </div>
    <div font-bold text-30rpx my-20rpx>{{ props.res.data.goodsName }}</div>
    <div color-warmGray text-24rpx>
      {{ props.res.data.sellingPoint || "" }}
    </div>

  </div>
</template>

<script setup lang="ts">
import { favoriteSomething } from '@/api/member';
import { unitPrice } from '@/utils/filters';
import { colors } from '@/constants/injection-key';
import { isLogin } from '@/utils/filters';
const emit = defineEmits(['share'])
const props = defineProps({
  res: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

function share() {
  emit('share')
}

const isFavorite = ref<boolean>(false)
async function getFavorite() {
  const res = await favoriteSomething('GOODS', props.res.data.id, 'isCollection');
  if (res.data.success) {
    isFavorite.value = res.data.result
  }
}

async function favorite() {
  const res = await favoriteSomething('GOODS', props.res.data.id, isFavorite.value ? 'delete' : 'add');
  if (res.data.success) {
    isFavorite.value = !isFavorite.value
  }
}

onMounted(() => {
  if (isLogin("auth")) {
    getFavorite()
  }
});
</script>

<style scoped lang="scss">
:deep(.nutui-iconfont .nut-icon-heart-fill){
  color: red;
}


</style>
